import React from "react";
import Card from "./Card";
import icon折扣 from "../assets/餐饮版首页切图/icon折扣.png";
import styles from "./styles.module.less";

export default class ContentLeft extends React.Component {
    state = {
        active: 0
    };

    skip = id => {
        this.setState({ active: id });
    };

    render() {
        const { active } = this.state;
        return (
            <div className={styles.leftContent}>
                <Card
                    title={
                        <div className={styles.discount}>
                            <img src={icon折扣} alt='' /> 折扣
                        </div>
                    }
                    news={2}
                    active={active === 0}
                    onClick={() => this.skip(0)}
                />
                <Card
                    title='商品信息'
                    title2='商品信息'
                    news={2}
                    active={active === 1}
                    onClick={() => this.skip(1)}
                />
                <Card
                    title='商品信息'
                    news={2}
                    active={active === 2}
                    onClick={() => this.skip(2)}
                />
                <Card
                    title='商品信息'
                    news={0}
                    active={active === 3}
                    onClick={() => this.skip(3)}
                />
                <Card
                    title='商品信息'
                    title2='商品信息'
                    news={22}
                    active={active === 4}
                    onClick={() => this.skip(4)}
                />
                {/*<Card*/}
                {/*    title='商品信息'*/}
                {/*    news={0}*/}
                {/*    active={active === 5}*/}
                {/*    onClick={() => this.skip(5)}*/}
                {/*/>*/}
            </div>
        );
    }
}
